<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生查询页面</title>
</head>
<body>

<div>
    <button><a href="StudentAdd.html">新增</a></button>
    <button id="query">查询</button>
</div>
<table width="600" border="1" cellspacing="0">
    <thead>
    <th >Id</th>
    <th>名字</th>
    <th>性别</th>
    <th>年龄</th>
    <th>大学</th>
    <th>城市</th>
    <th>学号</th>
    <th>操作</th>
    </thead>
    <tbody id="studentList">

    </tbody>
</table>
<div>
    <button onclick="pre()">&lt;</button>
    <span id="pageBtn">

    </span>
    <button onclick="next()">&gt;</button>
</div>
<!--引入ajax文件，事先准备好的文件-->
<script src="ajax.js"></script>
<script src="common.js"></script>
<script>
    let queryDom = document.querySelector("#query");

    queryDom.addEventListener("click", function (e) {
        query();//事件中调用方法
    });

    let size = 10;//一页的大小
    let page = 1;//第几页
    let maxCount = 0;//最大值
    // 查询功能
    function query() {
        //    1. ajax
        //    2. size与page
        //    3. 查询成功之后的回调函数
        //查询回调函数
        function queryCallBack(data) {
            if (data.code == "200") {
                // 数据返回成功
                // 产生页码
                let pageBtnDom = document.querySelector("#pageBtn");
                removeAllChild(pageBtnDom);
                maxCount=data.data.count;
                for (let i = 1; i <= Math.ceil(data.data.count / size); i++) {//总数/每一页显示数=总页数
                    let btn = document.createElement("button");
                    btn.innerText = i;
                    btn.onclick = function (e) {
                        page = e.target.innerText;//target表示事件发生的标签来源
                        let formData = new FormData();//表单数据对象，即键值对
                        formData.append("size", size);//增加参数 类似 name=value
                        formData.append("page", page);
                        ajax("/student/list.php", "POST", formData, queryCallBack);
                    };
                    pageBtn.append(btn);//添加页码
                }

                //插入学生表
                let studentList = document.querySelector("#studentList");//放在循环外，增加性能
                removeAllChild(studentList);
                for (let i = 0; i < data.data.list.length; i++) {
                    let student = data.data.list[i];//表示一个学生

                    let tr = document.createElement("tr");//创建一行

                    let td = document.createElement("td");//创建id单元格
                    td.setAttribute("class","id");
                    td.innerText = student.id;
                    tr.appendChild(td);//插入id节点

                    td = document.createElement("td");//创建name单元格
                    td.setAttribute("class","name");
                    td.innerText = student.name;
                    tr.appendChild(td);//插入name节点

                    td = document.createElement("td");//创建name单元格
                    td.setAttribute("class","sex");

                    td.innerText=student.sex;
                    if(student.sex==1){
                        td.innerText = "男";
                    }
                    if(student.sex==2){
                        td.innerText = "女";
                    }

                    tr.appendChild(td);//插入name节点

                    td = document.createElement("td");//创建name单元格
                    td.setAttribute("class","age");

                    td.innerText = student.age;
                    tr.appendChild(td);//插入name节点

                    td = document.createElement("td");//创建name单元格
                    td.setAttribute("class","edu");

                    td.innerText = student.edu;
                    tr.appendChild(td);//插入name节点

                    td = document.createElement("td");//创建name单元格
                    td.setAttribute("class","city");

                    td.innerText = student.city;
                    if(student.city==1)
                    {
                        td.innerText = "北京";
                    }
                    if(student.city==2)
                    {
                        td.innerText = "福州";
                    }
                    if(student.city==3)
                    {
                        td.innerText = "厦门";
                    }
                    if(student.city==4)
                    {
                        td.innerText = "龙岩";
                    }
                    if(student.city==5)
                    {
                        td.innerText = "泉州";
                    }
                    tr.appendChild(td);//插入name节点

                    td = document.createElement("td");//创建name单元格
                    td.setAttribute("class","no");

                    td.innerText = student.no;
                    tr.appendChild(td);//插入name节点


                    td = document.createElement("td");
                    let btn = document.createElement("button");
                    btn.innerText = "修改";
                    btn.onclick = function (e) {
                        let td=e.target.parentNode.parentNode;
                        let id=td.querySelector(".id").innerText;
                        // window.id=td.querySelectorAll(".id").innerText;
                        // ajax("/student/get.php","POST",formData,queryCallBack);
                        location.href = "/StudentChange.html?id="+id;

                        // let formDataShit=new FormData();
                        // formDataShit.append("id",id );
                        // formDataShit.append("name", name);
                        // formDataShit.append("sex", sex);
                        // formDataShit.append("age", age);
                        // formDataShit.append("edu", edu);
                        // formDataShit.append("city", city);
                        // formDataShit.append("no", no);
                    };
                    td.appendChild(btn);
                    btn = document.createElement("button");
                    btn.innerText = "删除";
                    btn.onclick = function (e) {
                        let td = e.target.parentNode.parentNode;
                        let id = td.querySelector(".id").innerText;
                        if(confirm("是否删除?")){
                            let formDataShit=new FormData();
                            formDataShit.append("id",id );
                            ajax("student/delete.php","POST", formDataShit,function () {
                                query();
                            });
                        }

                        query();

                    }

                    td.appendChild(btn);
                    tr.appendChild(td);

                    studentList.appendChild(tr);//插入一行
                }

            } else {
                alert(data.msg)
            }
        }

        let formData = new FormData();//表单数据对象，即键值对
        formData.append("size", size);//增加参数 类似 name=value
        formData.append("page", page);

        // formData.append("name", name);
        // formData.append("sex", sex);
        // formData.append("age", age);
        // formData.append("edu", edu);
        // formData.append("city", city);
        // formData.append("no", no);
        ajax("student/list.php", "POST", formData, queryCallBack);
    }

    query();//文件加载 就加载数据
    function pre() {
        page--;
        if (page < 1) {
            page = 1;
            return;
        }
query();
    }

    //下页
    function next() {
        page++;
        if (page > Math.ceil(maxCount / size)) {
            page = Math.ceil(maxCount / size);
            return;
        }
        query();
    }
</script>
</body>
</html>
